<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>

    <!--== META TAGS ==-->
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700%7CMontserrat:400,700" rel="stylesheet">

    <!-- FONT-AWESOME ICON CSS -->
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!--== ALL CSS FILES ==-->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/mob.css">
    <link rel="stylesheet" href="css/animate.css">

	<!-- 地图的样式，用的高德地图默认的css -->
	<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

	<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
	<script src="js/html5shiv.js"></script>
	<script src="js/respond.min.js"></script>
	<![endif]-->
</head>

<style>

    #container{
        height:400px;
        width:800px;
        float:left;
    }
    #panel {
        float:left;
        background-color: white;
        max-height: 90%;
        overflow-y: auto;
        top: 10px;
        right: 10px;
        width: 280px;
    }
    #panel .amap-call {
        background-color: #009cf9;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    #panel .amap-lib-driving {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        overflow: hidden;
    }
	</style>

<body>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>

    <!--====== TOP HEADER ==========-->
    <section>
        <div class="rows head" data-spy="affix" data-offset-top="120">
            <div class="container">
                <div>
                    <!--====== BRANDING LOGO ==========-->
                    <div class="col-md-4 col-sm-12 col-xs-12 head_left">
                        <!-- TODO:logo要换 -->
                        <a href="/index">
                            <font color="#FFFFFF">首页</font>
                        </a>
                    </div>
                    <!--====== HELP LINE & EMAIL ID ==========-->
                    <div class="col-md-8 col-sm-12 col-xs-12 head_right head_right_all">
                        <ul>
                            <li>
                                <div class="dropdown">
                                    <button class="dropbtn">我的账号</button>
                                    <div class="dropdown-content">
                                        <!-- 这里加登录注册的事件 -->
                                        <!-- 还未完成 -->
                                        <a href="#"><i class="fa fa-sign-in" aria-hidden="true"></i>登录</a>
                                        <a href="#"><i class="fa fa-address-book-o" aria-hidden="true"></i>注册</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--====== BANNER ==========-->
    <section>
        <div class="rows inner_banner">
            <div class="container">
                <h2><span>欢迎来到亲子旅游网 — </span>请享受您的寓教于乐之旅</h2>
                <p>现在我们就来一起打卡吧！</p>
            </div>
        </div>
    </section>
    <!--====== PLACES ==========-->
    <section>
        <div class="rows inn-page-bg com-colo">
            <div class="container inn-page-con-bg tb-space pad-bot-redu-5" id="inner-page-title">
                <!-- TITLE & DESCRIPTION -->
                <div class="spe-title col-md-12">
                    <h2><span id="pos_name"></span></h2>
                    <div class="title-line">
                        <div class="tl-1"></div>
                        <div class="tl-2"></div>
                        <div class="tl-3"></div>
                    </div>
                    <p id="pos_describe2"></p>
                </div>
                <!--===== PLACES ======-->
                <div class="rows p2_2">
                    <div class="col-md-6 col-sm-6 col-xs-12 p2_1">
                        <img id="pos_image" src="images/iplace-2.jpg" alt="" />
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12 p2">
                        <h3>推荐指数：<span><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star-half-o" aria-hidden="true"></i></span></h3>
                        <p id="pos_describe1"></p>
                        <div class="featur">
                            <h4>地点</h4>
                            <ul>
                                <li id="pos_address"></li>
                            </ul>
                        </div>
                        <div class="p2_book">
                            <ul>
                                <li><a href="#" class="link-btn" id="register_pos" onclick="register_pos()" style="display: none;">现在打卡</a>
                                </li>
                                <li><a href="#" class="link-btn" id="navigation_pos" style="display: none;">带我去</a>
                                </li>
                                <li><a href="#" class="link-btn" id="unable" style="disabled:true;background: lightgrey;">加载中</a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
				<div class=" ">
					<!--将dom元素预先写在body中-->
					<div id='container'></div>
					<div id="panel"></div>
				</div>
                <!--===== PLACES END ======-->
            </div>
        </div>
    </section>
	<br><br><br><br><br><br>
    <!--====== FOOTER - COPYRIGHT ==========-->
    <section>
        <div class="rows copy">
            <div class="container">
                <p>Copyrights © 2019 Company Name. All Rights Reserved</p>
            </div>
        </div>
    </section>

    <section>
        <div class="icon-float">
            <ul>
                <li><a href="#" class="sh">1k <br> Share</a>
                </li>
                <li><a href="#" class="fb1"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                </li>
                <li><a href="#" class="gp1"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
                </li>
                <li><a href="#" class="tw1"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                </li>
                <li><a href="#" class="li1"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                </li>
                <li><a href="#" class="sh1"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
                </li>
            </ul>
        </div>
    </section>

    <!--========= Scripts ===========-->
    <script src="js/jquery-latest.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/custom.js"></script>

    <script>
        //伪数据，后面删
        var get_aid1_json = {
            "aid": 1,
            "name": "武汉植物园",
            "address": "武汉市武昌区东湖风景区植物园路特1号",
            "describe1": "中国科学院武汉植物园是集科学研究、物种保存、科普教育和休闲旅游于一体的国家三大核心植物园之一 , 为国家 AAAA级风景旅游区，先后被评为全国科普教育基地、全国青少年科技教育基地、湖北省和武汉市科普教育、环境教育及爱国主义教育基地。\r\n\r\n　　武汉植物园依托自身丰富的植物资源，打造四季花展品牌，推出了春季荷兰郁金香花展、中华桃花展、牡丹珍品展、华中杜鹃展，夏季荷花睡莲展，秋季菊花珍品展，冬季热带兰花展等特色品牌花展。\r\n\r\n　　春季几十万株郁金香、风信子、洋水仙等球根花卉，打造欧式花海，吸引了几十万游客前来观赏 ,还有桃花、梨花、杜鹃、牡丹、芍药同台竞艳；夏季荷花睡莲等水生花卉大放异彩；秋季，武汉植物园菊花展展示一千多个菊花珍品；冬季，热带兰花打造热闹的兰花盛会。可谓月月有花看，季季有花展，全年都是赏花的好季节。",
            "describe2": "超美植物园",
            "describe3": null,
            "image": "images/武汉植物园.jfif",
            "bf1": null,
            "bf2": null,
            "bf3": null
        }

        function init_html(get_aid_json) {
            $("#pos_name").append(get_aid_json['name']);
            $("#pos_describe2").append(get_aid_json['describe2']);
            $("#pos_describe1").append(get_aid_json['describe1']);
            $("#pos_address").append(get_aid_json['address']);
            document.getElementById("pos_image").src = get_aid_json['image'];
        }

        //获取url后参数
        function GetQueryValue(queryName) {
            var query = decodeURI(window.location.search.substring(1));
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == queryName) {
                    return pair[1];
                }
            }
            return null;
        }

        //console.log(GetQueryValue("aid"));

        //假初始化，调用初始化函数,传入该详情页的json数据
        //init_html(get_aid1_json);
		init_html_by_ajax();
        //调用ajax初始化，未测
        // -----------------------------------------------------------
        function init_html_by_ajax() {
            $.ajax({
                url: '/attraction/get?aid=' + GetQueryValue("aid"), //地址
                dataType: 'json', //数据类型
                type: 'GET', //类型
                timeout: 2000, //超时
                //请求成功
                success: function(data, status) {
                    init_html(data);
                },
                //失败/超时
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    if (textStatus === 'timeout') {
                        log.error('請求超時');
                        setTimeout(function() {
                            log.success('重新请求');
                        }, 2000);
                    }
                }
            });
        }

        //打卡,未测
        // ------------------------------------------------------------
        function register_pos() {
		console.log("register")
            $.ajax({
                url: '/register/punch?uid=1&aid=' + GetQueryValue("aid"), //地址
                dataType: 'json', //数据类型
                type: 'GET', //类型
                timeout: 2000, //超时
                //请求成功
                success: function(data, status) {
				//TODO: 合成打卡
				console.log(data)
                    if (data) {
                        log.success('打卡成功');
                        console.log("打卡成功");
                    } else {
                        log.success('打卡失败');
                    }
                },
                //失败/超时
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    if (textStatus === 'timeout') {
                        log.success('請求超時');
                        setTimeout(function() {
                            log.success('重新请求');
                        }, 2000);
                    }
                }
            });
        }

        /*
         *@功能:根据景点名称获取景点的经纬度
         *@param:
         * 		变量名:site		类型:string		描述:某景点的地址，文字描述形式
         */
        function getScenPosition(site){

            $.ajax({
                url: 'http://restapi.amap.com/v3/geocode/geo?key=cceec089b68ba17919a2e81b5e48c21b&s=rsv3&city=35&address=武汉' + site, //地址
                dataType: 'json', //数据类型
                type: 'GET', //类型
                timeout: 2000, //超时
                //请求成功
                success: function(data, status) {
                    if(data['status'] != "1")
                        log.error("获取景点的定位失败")
                    else{
                        var pos = getLocation(data['geocodes'][0]['location']);
                        addMarker(pos.lng,pos.lat);
                        var register_pos = document.getElementById("register_pos");//获取打卡按钮
                        var navigation_pos = document.getElementById("navigation_pos");//获取导航按钮
						var unable = document.getElementById("unable");//过渡阶段使用的按钮
                        navigation_pos.onclick = function(){
                            driveTo(pos.lng,pos.lat);
                        }

                        if(isArrive(pos.lng,pos.lat)){//如果已到达目的地
                            register_pos.style.display="block";
                            navigation_pos.style.display="none";
							unable.style.display="none";
                        }else{
                            register_pos.style.display="none";
                            navigation_pos.style.display="block";
							unable.style.display="none";
                        }
                    }

                },
                //失败/超时
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    if (textStatus === 'timeout') {
                        log.error("请求高德地图地址接口失败-1！")
                        setTimeout(function() {
                            log.success('重新请求');
                        }, 2000);
                    }
                }
            });
        }

        window.onload = function(){
            getScenPosition("华中科技大学韵苑16栋");
           // getScenPosition("武汉植物园");
        }
    </script>
</body>

<script src='https://webapi.amap.com/maps?v=1.4.15&key=cceec089b68ba17919a2e81b5e48c21b'></script>
<script src="js/map.js"></script>

</html>